<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>editAccount</title>
    <link rel="StyleSheet" href="/css/bootstarp.css" type="text/css" media="screen"/>
</head>
<body>

<div id="Content">
    <div id="BackLink">
        <a href="/admin/main">Return to Main</a>
    </div>
    <div id="Catalog"><form action="/account/editAccount" method="post">

        <h3>User Information</h3>

        <table>
            <tr>
                <td>User ID:</td>
                <td th:text="${account.username}">username</td>
            </tr>
            <input type="hidden" name="username" th:value="${account.username}"/>
            <tr>
                <td>Password:</td>
                <td><label>
                    <input type="text" name="password" th:value="${account.password}">
                </label></td>
            </tr>
        </table>

        <h3>Account Information</h3>

        <table>
            <tr>
                <td>First name:</td>
                <td>
                    <input id= "firstname"type="text" name="account.firstName" th:value="${account.firstName}" >
                    <span id="FirstnameTips"></span>
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td>
                    <input id="lastname" type="text" name="account.lastName" th:value="${account.lastName}">
                    <span id="LastnameTips"></span>
                </td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>
                    <input id="email" type="text" size="40" name="account.email" th:value="${account.email}">
                    <span id="EmailTips"></span>
                </td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td>
                    <input id="phone" type="text" name="account.phone" th:value="${account.phone}">
                    <span id="PhoneTips"></span>
                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td>
                    <input id="address1" type="text" size="40" name="account.address1" th:value="${account.address1}">
                    <span id="Address1Tips"></span>
                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td><label>
                    <input type="text" size="40" name="account.address2" th:value="${account.address2}">
                </label></td>
            </tr>
            <tr>
                <td>City:</td>
                <td>
                    <input id="city" type="text" name="account.city" th:value="${account.city}">
                    <span id="CityTips"></span>
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td>
                    <input id="state" type="text" size="4" name="account.state" th:value="${account.state}">
                    <span id="StateTips"></span>
                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td>
                    <input id="zip" type="text" size="10" name="account.zip" th:value="${account.zip}">
                    <span id="ZipTips"></span>
                </td>
            </tr>
            <tr>
                <td>Country:</td>
                <td>
                    <input id="country" type="text" size="15" name="account.country" th:value="${account.country}">
                    <span id="CountryTips"></span>
                </td>
            </tr>
        </table>

        <h3>Profile Information</h3>

        <table>
            <tr>
                <td>Language Preference:</td>
                <td><label>
                    <select name="account.languagePreference">
                        <option value="English"> English </option>
                        <option value="Japanese"> Japanese </option>
                    </select>
                </label></td>
            </tr>
            <tr>
                <td>Favourite Category:</td>
                <td><label>
                    <select name="account.favouriteCategoryId">
                        <option value="fish"> FISH </option>
                        <option value="dogs"> DOGS </option>
                        <option value="reptiles"> REPTILES </option>
                        <option value="cats"> CATS </option>
                        <option value="birds"> BIRDS </option>
                    </select>
                </label></td>
            </tr>
            <tr>
                <td>Enable MyList</td>
                <td><label>
                    <input type="checkbox" name="account.listOption" />
                </label></td>
            </tr>
            <tr>
                <td>Enable MyBanner</td>
                <td><label>
                    <input type="checkbox" name="account.bannerOption" />
                </label></td>
            </tr>
        </table>
        <input type="submit" name="editAccount" value="Edit" />

    </form>
</div>
</div>
</body>
</html>